<template>
  <div class="complete">
    <div class="box usual-box">
      <div class="box-icon">
        <i class="el-icon-message-solid"></i>
      </div>
      <div class="box-info">
        <div class="info-top">
          <span>{{ sourceList.orgCount }}</span>
          部门
        </div>
        <div class="info-bottom">全局考核单位</div>
      </div>
    </div>
    <div class="box usual-box">
      <div class="box-icon">
        <i class="el-icon-message-solid"></i>
      </div>
      <div class="box-info">
        <div class="info-top">
          <span>{{ sourceList.userCount }}</span>
          人
        </div>
        <div class="info-bottom">本季度全局考核人数</div>
      </div>
    </div>
    <div class="box usual-box">
      <div class="box-icon">
        <i class="el-icon-menu"></i>
      </div>
      <el-tooltip
        placement="bottom"
        effect="light"
        :disabled="!sourceList.maxUserList || sourceList.maxUserList.length === 0"
        popper-class="tooltip_user tooltip-complete">
        <div slot="content" class="tooltip_con" style="maxwidth: 450px">
          <div class="con-li" v-for="(item, index) in sourceList.maxUserList" :key="index" :ref="'content_li' + index">
            <div class="li-head">
              <img :src="item.headUrl" alt="" v-if="item.headUrl" />
              <img src="@images/user-icon-G.png" alt="" v-else-if="item.gender == '2'" />
              <img src="@images/user-icon.png" alt="" v-else />
            </div>
            <div class="li-name">{{ item.userName }}</div>
            <div class="li-con">
              <div class="li-con_left">任职部门</div>
              <div class="li-con_right" :title="item.orgName">{{ item.orgName }}</div>
            </div>
            <div class="li-con">
              <div class="li-con_left">考核得分</div>
              <div class="li-con_right">{{ item.tolScore }}分</div>
            </div>
          </div>
        </div>
        <div class="box-info">
          <div class="info-top">
            <span>{{ sourceList.highestScore }}</span>
            分
          </div>
          <div class="info-bottom">本季度考核最高分</div>
        </div>
      </el-tooltip>
    </div>

    <div class="box usual-box">
      <div class="box-icon">
        <i class="el-icon-menu"></i>
      </div>
      <el-tooltip
        placement="bottom"
        effect="light"
        :disabled="!sourceList.minUserList || sourceList.minUserList.length === 0"
        popper-class="tooltip_user tooltip-complete">
        <div slot="content" class="tooltip_con" style="maxwidth: 450px">
          <div class="con-li" v-for="(item, index) in sourceList.minUserList" :key="index" :ref="'content_li' + index">
            <div class="li-head">
              <img :src="item.headUrl" alt="" v-if="item.headUrl" />
              <img src="@images/user-icon-G.png" alt="" v-else-if="item.gender == '2'" />
              <img src="@images/user-icon.png" alt="" v-else />
            </div>
            <div class="li-name">{{ item.userName }}</div>
            <div class="li-con">
              <div class="li-con_left">任职部门</div>
              <div class="li-con_right" :title="item.orgName">{{ item.orgName }}</div>
            </div>
            <div class="li-con">
              <div class="li-con_left">考核得分</div>
              <div class="li-con_right">{{ item.tolScore }}分</div>
            </div>
          </div>
        </div>
        <div class="box-info">
          <div class="info-top">
            <span>{{ sourceList.lowestScore }}</span>
            分
          </div>
          <div class="info-bottom">本季度考核最低分</div>
        </div>
      </el-tooltip>
    </div>
    <div class="box usual-box">
      <div class="box-icon">
        <i class="el-icon-menu"></i>
      </div>
      <div class="box-info">
        <div class="info-top">
          <span class="avg">{{ sourceList.avgScore }}</span>
          分
        </div>
        <div class="info-bottom">本季度考核平均分</div>
      </div>
    </div>
  </div>
</template>

<script>
import {} from '@apis/api-intelligent.js'
export default {
  name: 'CompleteData',
  components: {},
  props: {
    sourceList: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},

  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.complete {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .box {
    width: 18.5%;
    height: 140px;
    position: relative;
    display: flex;
    align-items: center;

    .box-icon {
      height: 70px;
      width: 70px;
      background-color: rgba(219, 226, 247, 0.6);
      border-radius: 6px;
      text-align: center;
      line-height: 70px;
      font-size: 35px;
      color: #1d6fff;
      margin: 0 15px;
      margin-right: 5px;
    }

    .box-info {
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-weight: bold;

      .info-top {
        span {
          font-size: 24px;
          color: #333333;
          font-weight: bold;
          margin-right: 5px;
        }

        .avg {
          text-shadow: rgb(19, 128, 255) 0px 0px 10px;
        }
      }
    }
  }
}

.con-li {
  background-image: linear-gradient(#f8f9fa, #eff4f4);
  border-radius: 8px;
  padding: 20px;
  width: 140px;
  text-align: center;
  margin-top: 20px;
  color: #8e95b2;
  cursor: pointer;

  .li-head {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin: auto;

    img {
      width: 100%;
      // height: 100%;
    }
  }

  .li-name {
    font-weight: bold;
    margin: 10px;
  }

  .li-con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 10px;

    .li-con_right {
      color: #37b1ed;
      flex: 1;
      margin-left: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
    }
  }

  .line {
    height: 1px;
    width: 100%;
    background-image: linear-gradient(to right, #ffffff, #dedede, #ffffff);
    margin: 6px 0;
  }
}
</style>
